<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/taglib/cw" prefix="CW" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<base href="<%=basePath%>">
	<title></title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link href="<%=basePath%>css/en/edit.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="<%=basePath%>js/commons/common_edit.js"></script>
	<script type='text/javascript' src='<%=basePath%>js/fileupload/ajaxfileupload.js'></script>
	<script type='text/javascript' src='<%=basePath%>js/commons/Math.uuid.js'></script>
	<script type="text/javascript" src="<%=basePath%>js/commons/common_dad.js"></script>
</head>
  
<body onload="_makeLoadeInfo()">
<form action="shop/updateShowImg.action" name="actionForm" id="actionForm" method="post">
	<!-- 详情展示总个数，格式为0不能提交 -->
	<input name="imgViewCount" id="imgViewCount" type="hidden" value="<s:property value="shopImgList.size()" />"/>
	<!-- 新增图片排序号字符串-->
	<input name="addList" id="addList" type="hidden" value=""/>

	<div class="pageheader" >
		<!-- 操作按钮 -->
		<div class="pageheadercontent">
			<div class="toolbar">
				<div class="toolbarright">
					<s:if test='upType=="add"'>
						<input class="okbtn" name="_submit" id="_submit" type="button" style="width:130px;" value="保存并下一步" onclick="__submit()">
						<input class="okbtn" type="button" value="跳过" onclick="_next()">
					</s:if>
					<s:else>
						<input class="okbtn" name="_submit" id="_submit" type="button" value="OK" onclick="__submit()"> 
					</s:else>
				</div>
			</div>
		</div>
	</div>
	<div class="writetblbox boxdiv">
		<div class="w fl">
			<div class="box-title-div">商户详情图片：点击图片可拖拽调整顺序，建议分辨率为1080**,至多上传50张图片</div>
			<input type="button" value="删除" id="delPublicationBtn" class="delbtn fr"/>
			<div class="file-box">
				<input  type='button' class='ATTACHMENTbtn' value='添加' id="inputBton"/>
				<input  title="" name="uploadFile" type="file" class="file" id="uploadFile" accept="image/*" size="28" onChange="return fileupload('uploadFile');"  />
			</div>
		</div>
		<div class="dowebok w fl" id="myImgDivs">
			<s:if test="shopImgList.size()>0">
		    <s:iterator value="shopImgList" var="shopImgList" status="status"> 
				<table id="<s:property value="id"/>" class="imgitem">
					<tr>
						<th>
							<input type="hidden" name="ImgViewList" id="ImgView<s:property value="id"/>" value="<s:property value="img_view"/>" addType="update"/>
							<input type="checkbox" name="chk_list" id="chk_list_<s:property value="id"/>" value="<s:property value="id"/>"/>
						</th>
						<td>
							<div><img id="img<s:property value="id"/>" src="<%=path%>/upload/getPriviewInpByPath.action?pathType=1&path=<s:property value="img_view"/>" ondragstart="return false"/></div>
						</td>
					<tr>
				</table>
			</s:iterator>
			</s:if>
		</div>
		<div class="boxdivfoot">
			<input type="button" value="删除" id="delPublicationBtn" class="delbtn fr"/>
			<div class="file-box">
				<input  type='button' class='ATTACHMENTbtn' value='添加' id="inputBton"/>
				<input  title="" name="uploadFileFoot" type="file" class="file" id="uploadFileFoot" accept="image/*" size="28" onChange="return fileupload('uploadFileFoot');"  />
			</div>
		</div>
	</div>
</form>
<jsp:include page="../../common/loadingPage.jsp" />
<span class="_height"></span>

<script type="text/javascript">
    var localUUID="";
	$(document).ready(function() {
		$('.dowebok').dad({
			target:'table',
			draggable: 'td'
		});
		//删除tr
		$("#delPublicationBtn").bind("click", function(){ 
			var deleteCount=$("input[name='chk_list']:checked").size();
			$("input[name='chk_list']:checked").each(function(i){ 
				var uuid=$(this).val();
				if(localUUID.indexOf(uuid)!=-1){
				    localUUID=localUUID.replace(uuid,"");
				}
			});
			var viewCount=$("#imgViewCount").val();
			var imgCount=viewCount-deleteCount;
			$("#imgViewCount").val(imgCount);
		  	$("input[name='chk_list']:checked").parent().parent().remove(); 
			if(imgCount<50){
				$("#uploadFileList").attr("disabled",false); 
				$("#inputBton").attr("disabled",false);
		    }
			$('.dowebok').dad({
				target:'table',
				draggable: 'td'
			});
		});
	});
    
	function __submit(){
		if($("#imgViewCount").val()==0){
			art.dialog.tips('请上传详情图片');
			return;
		} 
		var addList="";
		$("input[name='ImgViewList']").each(function(i){
			var imgId = $(this).attr("id").replace("ImgView","");
			var imgView = $(this).val();
			var type="update";
			if($(this).attr("addType")=="add"){
				type="add";
			}
			addList=addList+","+imgId+"#"+imgView+"#"+type;
		});
   		$("#addList").val(addList);
  		$("#loadingdiv").show();
   		document.actionForm.submit();
	}
     
    function fileupload(tagName){
		var uuid=Math.uuid();
		//预设的支持的图片类型
		var imgFileType= "*.BMP;*.JPG;*.JPEG;*.PNG;*.GIF;";
		var filepath=$("#"+tagName).val();
		if(filepath==undefined||$.trim(filepath)==""){ 
	          art.dialog.tips('未上传图片！');
	          return false; 
	 	}else{ 
			var fileArr=filepath.split("//");
			var fileTArr=fileArr[fileArr.length-1].toUpperCase().split("."); 
			var filetype=fileTArr[fileTArr.length-1];
			//如果不为图片类型
			if(imgFileType.indexOf(filetype) == -1){
				art.dialog.tips('图片格式错误！');
				return false;  
	  		}
		} 
		$.ajaxFileUpload({
			url:"<%=basePath%>/SwfFileUpload",
			method:"post",
			secureuri:false,
			fileElementId : tagName,
			dataType: 'text/xml',			
			success: function (data) {
				var result = data.split("#");
				var path = result[1];//在临时文件库中的相对路径
				var fileSizeBytes = result[8];//文件大小 单位byte  
				if(fileSizeBytes>2097152){
			 		art.dialog.tips('上传图片不能超过2M，请重新输入');
				}else{
					//table新增行
	   				var str = "<table class='imgitem' id='"+uuid+"'><tr>";
	   				str = str+"<th><input type='checkbox' name='chk_list' id='chk_list_"+uuid+"' value='"+uuid+"' />";
	   				str = str+"<input type='hidden' name='ImgViewList' id='ImgView"+uuid+"' value="+path+" addType='add'/></th>";
	   				str = str+"<td><div><img id='img"+uuid+"' src='' ondragstart='return false'/></div></td>";
	   				str = str+"</tr></table>";
	   				$("#myImgDivs").append(str);
					var url = "<%=basePath%>/upload/getPriviewInpByPath.action?path="+ path;
					$("#img"+uuid).attr("src", url);
					$("#img"+uuid).show();
					var imgCount=$("#imgViewCount").val();
					imgCount++;
					$("#imgViewCount").val(imgCount);
					if(imgCount==50){
						$("#uploadFileList").attr("disabled",true); 
						$("#inputBton").attr("disabled",true);
					}
					$('.dowebok').dad({
						target:'table',
						draggable: 'td'
					});
				}
			},
			error : function(data) {
				art.dialog.tips('上传图片错误！');
			}
		});
	}
	//进图页面讲默认信息保存
	function _makeLoadeInfo(){
		$("input[name='localMark']").each(function(i){ 
			localUUID=localUUID+","+$(this).val();
		});
	}
	
	function __next(){
		document.actionForm.action="<%=basePath%>shop/gotoModifyAplay.action";
		document.actionForm.submit();
	}
</script>
</body>
</html>

